<template>
  <div
    class="add-content-box edit-content"
    v-for="(item, key) in propertyList.filter(itm => itm.categoryId === categoryId && !itm.fixed)"
    :key="key"
  >
    <el-select
      filterable
      v-model="item.typeId"
      placeholder="请选择"
      clearable
      @focus="getDicById(item.categoryId)"
      @change="val => changeHandler(val, item)"
    >
      <el-option v-for="item in selectList[item.categoryId]" :key="item.name" :label="item.name" :value="item.id" />
    </el-select>
    <el-select
      multiple
      filterable
      v-model="item.content"
      placeholder="请选择"
      clearable
      @focus="getDicById(item.typeId, item)"
      @change="val => changeHandlerOptions(val, item, selectList)"
    >
      <el-option v-for="item2 in selectListFn(item.typeId, item)" :key="item2.id" :label="item2.name" :value="item2.id">
        <div class="flx-start" style="align-items: center">
          <span class="rundle-dot" :class="{ bp: isBp(item2.name), xp: isXp(item2.name) }" />
          <span style="flex: 1; height: 100%">{{ item2.name }}</span>
        </div>
      </el-option>
    </el-select>
    <el-icon name="el-icon-delete" class="delete-icon" @click="() => deleteItem(item)">
      <CircleCloseFilled />
    </el-icon>
  </div>
  <div class="add-content-box add-content" @click="addHandler">新增参数</div>
</template>
<script setup lang="ts">
import { defineModel, inject } from "vue";
import { useDict } from "@/hooks/useDict";
import { generateUUID } from "@/utils";
import { useUtile } from "../hooks/useUtil";

//变量
const propertyList = defineModel("propertyList", {
  type: Array,
  default: () => []
});
const props = defineProps({
  categoryId: String
});
// inject
const selectList: any = inject("selectList");

// hook
const { getDicList, getParentIdKey } = useDict();
const { changeHandlerOptions, changeOptionsData, fittingsFn, isBp, isXp } = useUtile();

// 方法
const selectListFn = (id: string, item: any) => {
  if (item.type === 4) {
    id = item.value;
  }
  return selectList.value[id];
};
const changeHandler = (val: string, item: any) => {
  const itemOrigin = selectList.value[props.categoryId].find(item => item.id == val);
  item.typeName = itemOrigin.name;
  item.content = [];
  item.type = itemOrigin.type;
  item.value = itemOrigin.param;
};

const getDicById = async (parentIdList: string, obj?: any) => {
  let res: any = {};
  if (obj && obj.type === 4) {
    res = await fittingsFn(obj.value);
  } else {
    res = await getDicList({ parentIdList });
  }

  // 处理添加标配和选配
  if (parentIdList != props.categoryId) {
    res = changeOptionsData(res);
  } else {
    Object.keys(res).forEach(key => {
      res[key] = res[key].filter(itm => itm.value != 1);
    });
  }
  selectList.value = { ...selectList.value, ...res };
};
const deleteItem = item => {
  propertyList.value = propertyList.value.filter(itm => itm.uuid != item.uuid);
};
const addHandler = () => {
  propertyList.value.push({
    uuid: generateUUID(),
    typeId: "",
    typeName: "",
    categoryId: props.categoryId,
    categoryName: getParentIdKey(props.categoryId),
    type: "",
    content: []
  });
};
</script>
<style lang="scss" scoped>
.add-content-box {
  width: 100%;
  height: 62px;
  background-color: #f5f7fa;
}
.add-content {
  display: block;
  width: 100%;
  height: 62px;
  font-size: 16px;
  font-weight: 400;
  line-height: 62px;
  color: #666666;
  text-align: center;
  cursor: pointer;
}
.edit-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  padding: 14px 11px;
  margin-bottom: 30px;
  .delete-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    font-size: 14px;
    cursor: pointer;
  }
}
.rundle-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
}
.bp {
  background: #74d98c;
}
.xp {
  border: 1px solid #74d98c;
}
</style>
